<template>
	<div class="box">
		<div class="left"><img :src="this.ip+'/'+info.imgurl" /></div>
		<div class="center">
			<div class="name">{{info.name}}</div>
			<div class="info">{{info.comment}}篇文章 · {{info.like}}点赞</div>
		</div>
		<div class="send">
			<div class="sendBtn">留言</div>
		</div>
	</div>
</template>

<script>
	export default {
		props:['info']
	}
</script>

<style>
	.box {
		display: flex;
		flex-direction: row;
		padding: 16px;
		border-bottom: 1px solid #EEEEEE;
	}

	.box .left,
	.box .left img {
		width: 48px;
		height: 48px;
		border-radius: 50%;
	}

	.box .center {
		height: 48px;
		width: 160px;
		padding: 0 8px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.box .center .info {
		font-size: 12px;
		color: #999999;
	}

	.box .send {
		height: 48px;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.box .send .sendBtn {
		width: 50px;
		height: 24px;
		line-height: 24px;
		background-color: #996699;
		font-size: 12px;
		color: white;
		text-align: center;
		border-radius: 12px;
		cursor: pointer;
	}
</style>
